<template>
  <el-dialog
    v-dialogDrag
    :visible.sync="dialogVisible"
    width="50%"
    :before-close="handleClose"
    :close-on-click-modal="false"
  >
    <!--v-model 是数据绑定将信息绑定到特定的位置-->
    <div style="border: 1px solid #cccccc;padding: 10px">
      <el-row>
        <!--左侧-->
        <el-col :span="10">
          <!-- 添加ref引用，他的值就是组件的实例对象 -->
          <!--inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。-->

          <!--左侧单选按钮列-->
          <el-row style="margin-bottom: 20px">
            <el-radio-group v-model="checkRadio" size="mini" @change="selectItems">
              <el-radio-button label="selectAll" border>全部</el-radio-button>
              <el-radio-button label="int" border>int</el-radio-button>
              <el-radio-button label="String" border>String</el-radio-button>
              <el-radio-button label="4" border>备选项2</el-radio-button>
            </el-radio-group>
          </el-row>
          <!--左侧单选按钮列 end-->

          <!--左侧搜索 -->
          <el-row>
            <el-form ref="inputRefs" :model="searchInput" :inline="true">
              <el-form-item prop="tableDataName">
                <el-input
                  v-model="searchInput.tableDataName"
                  prefix-icon="el-icon-search"
                  width
                  :placeholder="searchHolder?searchHolder:'请输入搜索内容'"
                  style="width:100%"
                  @input="realTime"
                />
              </el-form-item>
              <!--<el-button type="primary" @click="doFilter">搜索</el-button>-->
              <!--<el-button type="primary" @click="resetFilter">重置</el-button>-->
            </el-form>
          </el-row>
          <!--左侧搜索  end-->

          <!--左侧选择数据框-->
          <el-row :span="10">
            <el-table
              :data="tableData"
              border
              height="280"
              style="width: 100%;margin-bottom: 0px"
              @selection-change="handleSelectionChange"
            >
              <!--选择列前面的按钮-->
              <el-table-column
                type="selection"
                width="40"
              />
              <!--需要选择的列-->
              <!--show-overflow-tooltip 将表格在屏幕中的占比自适应调整-->
              <!-- key属性的作用是每一个v-for都提供唯一的一个key属性 -->
              <el-table-column
                label="列名"
                prop="columnName"
                show-overflow-tooltip
              />
              <el-table-column
                label="数据类型"
                prop="type"
                show-overflow-tooltip
              />
            </el-table>
          </el-row>
          <!--左侧选择框 end-->
        </el-col>
        <!--左侧 end-->

        <!--中间的选择按钮-->
        <el-col :span="4">
          <div style="margin-top: 100%;margin-left:25%;margin-right:25%">
            <el-button type="primary" icon="icon el-icon-d-arrow-right" @click="selectItems" />
          </div>
        </el-col>

        <!--右侧 -->
        <el-col :span="10">

          <!--右侧搜索-->
          <el-row :span="10" :offset="4">
            <el-form ref="selectedRefs" :model="searchSelected" :inline="true">
              <el-form-item prop="selectedDataName">
                <el-input
                  v-model="searchSelected.selectedDataName"
                  prefix-icon="el-icon-search"
                  :placeholder="searchHolder?searchHolder:'请输入搜索内容'"
                  style="width:100%"
                  @input="selectedSearch"
                />
              </el-form-item>
            </el-form>
          </el-row>
          <!--右侧搜索 end-->

          <!--右侧表格-->
          <el-row>
            <el-table
              :data="resultData"
              height="280"
              style="width: 100%;margin-bottom: 0px"
              border
            >

              <el-table-column
                label="列名"
                prop="columnName"
                show-overflow-tooltip
              />
              <el-table-column
                label="数据类型"
                prop="type"
                show-overflow-tooltip
              />

              <el-table-column label="操作">
                <template slot-scope="scope">
                  <!--click.native.prevent 是用来阻止默认行为的 即阻止默认的执行方法 来执行自己定义的handleDelete方法
                  scope.$index 中存放的是右侧resultData中的下标索引 row是存放的是表索引对应的行的信息，resultData存放的是删除后剩余的值
                  scope是通过插槽在子组件中传递过来的值-->
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row,scope,resultData)"
                  >删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
          <!--右侧表格 end-->

        </el-col>
        <!--右侧  end-->

      </el-row>
    </div>
    <div style="float: right; margin-top: 10px; margin-bottom: 20px">
      <el-button @click="cancelMethod">取 消</el-button>
      <el-button type="primary" @click="StoreDataMethod">确 定</el-button>
    </div>
  </el-dialog>
</template>

<style>

</style>

<script>
  export default {
    /**
     * 参数说明:
     * searchHolder:  搜索框提示的内容

     * 使用模板
     *  <g-transfer  :hasSearch="true" :isCheckValue="exportFieldVlue" :searchHolder="pSearchHolder" :receiveData="exportFieldData"  @dispatchData="getCurrentNodeTransfer" :tableKey="tableKey"></g-transfer>
     *  清除搜索条件方法   调用类似this.$refs['gTransferRef'].clearSearch();
     *  **/
    name: 'SelectColumn',
    inject: ['root'],
    props: {
      dialogVisible: Boolean,
      searchHolder: { type: String }
    },
    data() {
      return {
        updateinfo: {
          tabledata: '',
          resultdata: '',
          resetselectdata: ''
        },
        checkRadio: 'selectAll',
        tableData: [],
        tableRawData: [],
        multipleSelection: [], // 存储选中的那一行的信息
        resultData: [], // 存放在右边需要渲染的数据
        searchInput: {
          tableDataName: '' // 左侧搜索框输入的值
        },
        searchSelected: {
          selectedDataName: '' // 右侧搜索框输入的值
        },
        filterTableDataEnd: [], // 存放在在左侧与输入的搜索项匹配的值
        filterSelectedDataEnd: [], // 存放右侧在搜索框输入数据后与之匹配的值
        resetData: [], // 用于左侧搜索框的重置
        resetSelectedData: [] // 存放选中之后提交到右面的条目
      }
    },
    computed: {},
    watch: {},
    created() {
      console.log('选择列初始化了')
      const { getSelected, save, find } = this.root.propsAPI
      const formModel = getSelected()[0].getModel()
      const graphData = save()
      const inEdges = graphData.edges.filter((edge) => {
        return edge.target === formModel.id
      })
      if (inEdges.length === 1) {
        var inEdges_temp = inEdges[0]
        const inputModel = find(inEdges_temp.source).getModel()
        var keyName = inputModel.label + inputModel.id
        var info = JSON.parse(sessionStorage.getItem(keyName))
        console.log('infolllll', keyName)
        console.log('info22222', info)
        if (info) {
          this.tableRawData = info.data.structData
          this.tableData = this.tableRawData
        }
      }
      var keyname = formModel.label + formModel.id
      var info1 = JSON.parse(sessionStorage.getItem(keyname))
      // 如果session里面存放了info1 那么说明此时已经点击了确定按钮 再次打开时修复渲染错误需要给this.resetSelectedData 赋初值
      if (info1) {
        this.tableData = info1.tabledata
        this.resultData = info1.resultdata
        this.resetSelectedData = info1.resetselectdata
        console.log('info1执行了')
      } else {
        console.log('没有点击更新按钮，初始化按最初')
      }
    },

    methods: {
      cancelMethod() {
        this.$emit('close-dialog')
      },
      StoreDataMethod(e) {
        this.$emit('close-dialog') // 告诉父组件要修改管理窗口可视化的变量
        // this.resetSelectedData.push.apply(this.resetSelectedData, this.multipleSelection)
        // console.log('resetSelectData:', this.resetSelectedData)
        // const { getSelected } = this.root.propsAPI
        // const formModel = getSelected()[0].getModel()
        // var keyname = formModel.label + formModel.id
        // this.updateinfo.tabledata = this.overlap(this.tableRawData, this.resetSelectedData)
        // this.updateinfo.resultdata = this.resetSelectedData
        // this.updateinfo.resetselectdata = this.resetSelectedData
        // console.log('tabledata', this.updateinfo.tabledata)
        // console.log('resultdata', this.updateinfo.resultdata)
        // sessionStorage.setItem(keyname, JSON.stringify(this.updateinfo))
      },
      handleClose(done) {
        this.$emit('showchange1')
        this.$confirm('确认关闭？')
          .then((_) => {
            done()
          })
          .catch((_) => {
          })
      },
      clearSearch() {
        this.searchInput.tableDataName = ''
        this.searchSelected.selectedDataName = ''
      },
      realTime() {
        console.log('已执行实时搜索功能1')
        // 每次手动将数据置空,因为会出现多次点击搜索情况
        this.filterTableDataEnd = []
        // 这里是为了阻止搜索框删除完最后一个值时再检索，数据会重复显示问题
        this.resetData = this.overlap(this.tableRawData, this.resetSelectedData)
        if (this.searchInput.tableDataName === '') {
          this.tableData = this.resetData
          return
        }
        this.resetData.forEach((value, index) => {
          if (value.columnName.indexOf(this.searchInput.tableDataName) >= 0) {
            if (this.filterTableDataEnd.length === 0) {
              this.filterTableDataEnd.push(value)
            } else if (this.filterTableDataEnd.length > 0) {
              if (this.filterTableDataEnd.indexOf(value) === -1) {
                this.filterTableDataEnd.push(value)
              }
            }
          }
        })
        this.tableData = this.filterTableDataEnd
      },
      selectedSearch() {
        console.log('已执行已选实时搜索功能2: ' + this.searchSelected.selectedDataName, this.resetSelectedData)
        this.filterSelectedDataEnd = []
        // 如果右侧搜索框中的值为空的话，进行默认的初始化，将用户选择好的条目在右侧进行渲染并返回
        if (this.searchSelected.selectedDataName === '') {
          this.resultData = this.resetSelectedData
          return
        }
        // 箭头函数value index代表resetSelectedData中的value以及其下标值
        this.resetSelectedData.forEach((value, index) => {
          if (value.columnName.indexOf(this.searchSelected.selectedDataName) >= 0) {
            // 判断存放的数组中是否已包含将要搜索的对象 判断存放要在右侧进行渲染的数组中该数据是否存在，如果不存在直接push 否则需要判断该数组中是否有
            if (this.filterSelectedDataEnd.length === 0) {
              this.filterSelectedDataEnd.push(value)
            } else if (this.filterSelectedDataEnd.length > 0) {
              if (this.filterSelectedDataEnd.indexOf(value) === -1) {
                this.filterSelectedDataEnd.push(value)
              }
            }
          }
        })
        this.resultData = this.filterSelectedDataEnd
      },
      handleDelete(index, row, scope, resultData) {
        // 将此次点击删除的数据从之前存入的添加的中间变量中进行删除，然后重新渲染让其在左侧进行显示
        // indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
        // splice() 方法从数组中删除项目，然后返回被删除的项目。(参数1，参数2) =>(要删除元素的位置，要删除元素的个数)
        // var removeIdx = this.resetSelectedData.indexOf(row)
        this.resetSelectedData.splice(index, 1)
        if (this.checkRadio === 'selectAll') {
          this.tableData = this.tableRawData
          // 删除左边被选中的数据,返回待选列表中被剩余的数据
          this.tableData = this.overlap(this.tableData, this.resetSelectedData)
        } else if (this.checkRadio === 'int') {
          this.tableData = this.tableRawData.filter(
            item => {
              return item.type === 'int'
            }
          )
          this.tableData = this.overlap(this.tableData, this.resetSelectedData)
        } else if (this.checkRadio === 'String') {
          this.tableData = this.tableRawData.filter(
            item => {
              return item.type === 'String'
            }
          )
          this.tableData = this.overlap(this.tableData, this.resetSelectedData)
        } else {
        }
        this.resultData = this.resetSelectedData
        console.log(this.resultData)
        console.log('选择列删除功能执行了')
        console.log(this.tableData)
      },
      handleSelectionChange(val) {
        console.log('val:', val)
        this.multipleSelection = val
      },

      selectItems() {
        // apply方法：等同下一行代码---数组合并,concat方法会创建一个新的数组，原来的数组同时存在，会造成内存浪费
        this.resetSelectedData.push.apply(this.resetSelectedData, this.multipleSelection)
        if (this.checkRadio === 'selectAll') {
          this.tableData = this.tableRawData
          // 删除左边被选中的数据,返回待选列表中被剩余的数据
          this.tableData = this.overlap(this.tableData, this.resetSelectedData)
        } else if (this.checkRadio === 'int') {
          this.tableData = this.tableRawData.filter(
            item => {
              return item.type === 'int'
            }
          )
          this.tableData = this.overlap(this.tableData, this.resetSelectedData)
        } else if (this.checkRadio === 'String') {
          this.tableData = this.tableRawData.filter(
            item => {
              return item.type === 'String'
            }
          )
          this.tableData = this.overlap(this.tableData, this.resetSelectedData)
        } else {
        }
        this.resultData = this.resetSelectedData
      },
      // overlap 函数的功能： 返回第一个数组中有但是第二个数组中没有的元素
      overlap(arr, arr2) {
        // console.log('arr: ' + JSON.stringify(arr))
        // console.log('arr2: ' + JSON.stringify(arr2))
        var arr3 = new Array()
        var index = 0
        var i = 0
        var j = 0
        for (i = 0; i < arr.length; i++) {
          var has = false
          for (j = 0; j < arr2.length; j++) {
            if (JSON.stringify(arr[i]) === JSON.stringify(arr2[j])) {
              has = true
              break
            }
          }
          if (!has) {
            arr3[index++] = arr[i]
          }
        }
        return arr3
      }
    }
  }
</script>

